import {defineStore} from 'pinia'
import cache from "@/units/cache"
import {UnwrapRef} from "@vue/reactivity";
import {MenuTheme,ThemeColor} from "@/apps/admin/theme";

type SizeType = 'default' | 'small' | 'large'


/**
 * UI配置
 */
export default defineStore('app-ui', {
    state(): { uiSize: SizeType, themeName: string, layoutMenuWidth: number, menuTheme: { ActiveTextColor: string, BackgroundColor: string, TextColor: string } } {
        return {
            uiSize: "default",
            themeName: ThemeColor[0].name,
            layoutMenuWidth: 210,
            menuTheme: {
                ...MenuTheme[0].color
            }
        }
    },
    actions: {
        setUiSize(uiSize: SizeType) {
            this.uiSize = uiSize
        },

        /**
         * 设置主题
         */
        setTheme(name: string) {
            this.themeName = name
        },


        /**
         * 设置菜单主题
         */
        setMenuTheme(conf: { ActiveTextColor: string, BackgroundColor: string, TextColor: string }) {
            this.menuTheme = conf
        },


        /**
         * 设置菜单宽度
         */
        setMenuWidth(width: number) {
            this.layoutMenuWidth = width
        }
    },

    getters: {
        /**
         * 获取主题名称
         */
        theme(): string {
            return this.themeName
        },


        /**
         * 获取主题名称
         */
        menuStyle(): { ActiveTextColor: string, BackgroundColor: string, TextColor: string } {
            return this.menuTheme
        },

        /**
         * 菜单款苏
         */
        menuWidth(): number {
            return this.layoutMenuWidth
        },

        /**
         * UI大小
         */
        size(): UnwrapRef<SizeType> {
            return this.uiSize
        }
    },

    persist: {//持久化储存
        enabled: true,
        strategies: [
            {
                key: `${cache.prefix()}-store-ui`, // 默认key是上面store的id，可自定义key
                storage: localStorage,//本地储存驱动
            }
        ]
    }
})